<template>
	<div style="margin-bottom: 20px;">
		单据编号：<el-input style="width: 200px;" placeholder="请输入单据编号"></el-input>
		&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
		商品信息：&nbsp;&nbsp;<el-input style="width: 300px;" placeholder="请输入条码、名称、规格、型号、颜色、扩展信息"></el-input>
		&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
		单据日期：&nbsp;&nbsp;<el-date-picker
        v-model="value1"
        type="daterange"
        range-separator="-"
        start-placeholder="Start date"
        end-placeholder="End date"
        :size="size"
      />
	  &nbsp;
	  <el-button type="primary">查询</el-button>
	  <el-button>重置</el-button>
	  &nbsp;
	  <text style="color: dodgerblue;font-size: 12px;">展开</text>
	  <br/>
	  <br/>
	  <el-button type="primary"><el-image src="../../src/assets/加号.png" style="width: 20px;height: 20px;"></el-image>&nbsp;&nbsp;新增</el-button>
	  <el-button @click="delDopptHeads()"><el-image src="../../src/assets/垃圾桶.png" style="width: 20px;height: 20px;"></el-image>&nbsp;&nbsp;删除</el-button>
	  <el-button @click="checkDeoptHead()"><el-image src="../../src/assets/对号.png" style="width: 20px;height: 20px;"></el-image>&nbsp;&nbsp;审核</el-button>
	  <el-button @click="noCheckDeoptHead()"><el-image src="../../src/assets/禁止.png" style="width: 20px;height: 20px;"></el-image>&nbsp;&nbsp;反审核</el-button>
	  <el-button><el-image src="../../src/assets/下载.png" style="width: 20px;height: 20px;"></el-image>&nbsp;&nbsp;导出</el-button>
	  <el-button><el-image src="../../src/assets/设置.png" style="width: 20px;height: 20px;"></el-image>&nbsp;&nbsp;列设置</el-button>
	</div>
    <el-table :data="tableData"
      style="width: 100%; margin-bottom: 20px"
      row-key="id"
      border
      default-expand-all
	  @selection-change="handleSelectionChange">
		<el-table-column type="selection" width="55" />
        <el-table-column prop="date" label="操作" width="200">
			<template #default="scope">
				<a style="color: blue;text-decoration: none;" @click="getDeoptHeadOne()">查看</a>
				&nbsp;&nbsp;
				<a style="color: blue;text-decoration: none;" @click="updateDeoptHeadOne()">编辑</a>
				&nbsp;&nbsp;
				<a style="color: blue;text-decoration: none;" @click="removeDeoptHeadOne()">删除</a>
				&nbsp;&nbsp;
				<a style="color: blue;text-decoration: none;" @click="copyDeoptHeadOne()">复制</a>
			</template>
		</el-table-column>
		<el-table-column v-show="false" prop="id" label="编号" width="100"/>
        <el-table-column prop="organName" label="供应商" width="100"/>
        <el-table-column prop="number" label="单据编号" />
        <el-table-column prop="material" label="商品信息" />
        <el-table-column prop="createTime" label="单据日期" width="180"/>
        <el-table-column prop="creatorName" label="操作员" width="100"/>
        <el-table-column prop="operNumber" label="数量" width="80"/>
        <el-table-column prop="totalPrice" label="金额合计" width="100"/>
        <el-table-column prop="status" label="状态" width="100">
			<template #default="scope">
				<el-button>
					<span style="color: green;">{{scope.row.status == 1 ? "已审核" : ""}}</span>
					<span style="color: red;">{{scope.row.status == 0 ? "未审核" : ""}}</span>
				</el-button>
			</template>
		</el-table-column>
      </el-table>

	  <div style="float: right;">
		  <el-pagination
		        v-model:current-page="currentPage4"
		        v-model:page-size="pageSize4"
		        :page-sizes="[5, 10, 15, 20]"
		        layout="total, sizes, prev, pager, next, jumper"
		        :total="total"
		        @size-change="handleSizeChange"
		        @current-change="handleCurrentChange"
		      />
	  </div>
</template>
<script setup>
import { onMounted, ref } from 'vue';
import request from '../../request/request';
import { ElMessage } from 'element-plus';
	const tableData=ref([])
	const currentPage4 = ref(1)
	const pageSize4 = ref(10)
	const total = ref(10)
	const handleSizeChange = (val) => {
		pageSize4.value=val
		getDeoptHeadAll()
	}
	const handleCurrentChange = (val) => {
		currentPage4.value=val
		getDeoptHeadAll()
	}
	
	const query=ref({
		pageNum:"",
		pageSize:""
	})
	
	// 查询所有
	function getDeoptHeadAll(){
		query.value.pageNum=currentPage4.value
		query.value.pageSize=pageSize4.value
		request({
			url:"/depotHead/list",
			method:"post",
			data:query.value
		}).then(res=>{
			console.log(res.data)
			if(res.data.code==200){
				tableData.value=res.data.data.list
				total.value=res.data.data.total
			}
		})
	}
	
	onMounted(()=>{
		getDeoptHeadAll()
	})
	
	
	//审核/批量审核
	const ids=ref([])
	const handleSelectionChange=(val)=>{
	  val.forEach(element=>{
	    ids.value.push(element.id)
	  }
	  )
	}
	console.log(ids.value);
	
	
	function checkDeoptHead() {
	         if (confirm("是否操作选中数据？")) {
	           // 执行操作
	           request({
	             url: "/depotHead/checkDeoptHead",
	             method: "post",
	             data: ids.value
	           }).then(res => {
	             if (res.data.code == 200) {
	               // 处理成功情况
				   ElMessage.success("操作成功")
				   getDeoptHeadAll()
	             }
	           });
	         } else {
	           ElMessage.success("取消成功");
			   getDeoptHeadAll()
	         }
	}
	
	function noCheckDeoptHead(){
		if (confirm("是否操作选中数据？")) {
		  // 执行操作
		  request({
		    url: "/depotHead/nocheckDeoptHead",
		    method: "post",
		    data: ids.value
		  }).then(res => {
		    if (res.data.code == 200) {
		      // 处理成功情况
						   ElMessage.success("操作成功")
						   getDeoptHeadAll()
		    }
		  });
		} else {
		  ElMessage.success("取消成功");
		  getDeoptHeadAll()
		}
	}
	
	function delDopptHeads(){
		if (confirm("是否删除选中数据？")) {
		  // 执行操作
		  request({
		    url: "/depotHead/delDopptHeads",
		    method: "post",
		    data: ids.value
		  }).then(res => {
		    if (res.data.code == 200) {
		      // 处理成功情况
				ElMessage.success("操作成功")
				getDeoptHeadAll()
		    }
			if(res.data.code==320){
				ElMessage.error("抱歉，只有未审核的单据带能删除")
				getDeoptHeadAll()
			}
		  });
		} else {
		  ElMessage.success("取消成功");
		  getDeoptHeadAll()
		}
	}
</script>